<!-- TODO(psimakov): use local YUI library -->
<link rel="stylesheet" type="text/css"
    href="/static/yui_3.6.0/yui/build/cssreset-context/cssreset-context-min.css">
<script
    src="/static/yui_3.6.0/yui/build/yui/yui.js"></script>
<link rel="stylesheet" type="text/css"
    href="/static/inputex-3.1.0/src/inputex/assets/skins/sam/inputex.css">
<link rel="stylesheet" type="text/css" href="assets/css/butterbar.css">
<script src="assets/lib/jquery-1.7.2.min.js"></script>
<script src="assets/lib/butterbar.js" type='text/javascript'></script>
<script
    src="/static/inputex-3.1.0/src/loader.js" type='text/javascript'></script>
<script
    src="/static/inputex-3.1.0/lib/jsonPretty.js" type='text/javascript'></script>

<!-- TODO(psimakov): take styles out into a separate file -->
<style>
  div#oeditor-container {
    position: relative;
  }

  div.form {
    width: 700px;
    margin: 20px;
    padding: 15px;
    display: none;
    text-align: left;
  }
  div#formContainer fieldset {
    border: none;
    border-top: solid 1px #999999;
    border-bottom: solid 1px #999999;
    margin-bottom: 16px;
  }
  div#formContainer fieldset legend span {
    color: #505050;
    font-weight: bold;
    padding: 4px;
  }
  div#formContainer fieldset fieldset {
    border-top: solid #eee 6px;
    border-bottom: none;
  }
  div#formContainer fieldset fieldset legend span {
    color: #777
  }
  div.split-from-main-group-parent {
    margin: 0 0 20px 70px !important;
  }

  div.inputEx-Field {
    width: 500px;
    padding-top: 0.2em;
    color: #000;
  }
  div.inputEx-fieldWrapper {
    position: relative; /* so we can absolutely position the rte control */
  }
  div.inputEx-Field textarea {
    width: 496px;
    height: 200px;
    border: solid 1px #999999;
    padding: 4px;
    border-left: 6px solid #999999;
    white-space: pre;
    word-wrap: normal;
    overflow: scroll;
  }
  div.inputEx-Field > select {
    max-width: 100%;
  }
  div.inputEx-StringField-wrapper input {
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 2px;
    text-align: left;
    border: solid 1px #999999;
  }
  div.inputEx-Field input {
    width: 100%;
    border-left: 6px solid #999999;
  }
  div.inputEx-CheckBox input {
    width: auto;
  }
  div.inputEx-DateField {
    width: 480px;
  }

  div.inputex-form-buttonbar {
    margin: 0px;
    padding-left: 8px;
    padding-top: 18px;
    border-top: solid 1px #9999FF;
    text-align: center;
  }
  div.inputex-form-buttonbar a {
    text-decoration: none;
    padding: 4px;
    padding-left: 16px;
    padding-right: 16px;
    margin-right: 16px;
    font-weight: bold;
    color: #000000;
  }
  a.inputex-list-link {
    float: right;
  }
  button.oeditor-control,
  a.inputEx-Button,
  div.inputEx-Button,
  div.inputEx-Field input.inputEx-Button,
  div.mc-choice + a,
  div.mc-choice-container > a,
  div.sa-grader + a,
  div.sa-grader-container > a,
  div.question-group-items a {
    width: auto;
    background-color: #666;
    color: #FFFFFF;
    padding: 4px;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: 4px;
    margin-right: 4px;
    font-weight: bold;
    text-decoration: none;
    border: none;
    transition: background 200ms;
    -webkit-transition: background 200ms;
    -moz-transition: background 200ms;
  }
  a.inputEx-Button.inputEx-Button-disabled {
    background-color: #ccc;
    transition: background 200ms;
    -webkit-transition: background 200ms;
    -moz-transition: background 200ms;
  }

  .gcb-pull-right {
    float: right;
  }

  .gcb-pull-left {
    float: left;
  }
  /*
   * CSS for the unit/lesson organizer
   * TODO(jorr): Rework this CSS to have clearer headers for nested properties
   */

  div#formContainer div.organizer fieldset {
    border: none;
    min-width: 300px;
    margin-bottom: 0;
    -webkit-padding-before: 0;
    -webkit-padding-after: 0;
  }
  div#formContainer div.organizer div.inputEx-label {
    width: auto;
  }
  div.organizer div.inputEx-ListField-subFieldEl > fieldset > div.inputEx-fieldWrapper {
    white-space: nowrap;
  }
  div.organizer div.inputEx-ListField-subFieldEl > fieldset > div.inputEx-fieldWrapper > div {
    float: none;
    display: inline;
    vertical-align: top;
  }
  div.organizer div.inputEx-ListField-childContainer > div {
    white-space: nowrap;
    border-top: solid 1px #eee;
  }
  div.organizer div.inputEx-ListField-Arrow {
    float: none;
    display: inline-block;
    float: right;
  }
  div.organizer a.inputEx-List-link {
    display: none;
  }


  img.framed {
    border: 1px solid #ccc;
    padding: 3px;
    max-width: 400px;
  }

  /*
   * CSS for the lightbox used by the GCB Rich Text Editor.
   */

  #modal-editor > .background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
    filter: alpha(opacity=50);
    z-index: 1000;
  }
  #modal-editor > iframe {
    position: fixed;
    top: 50%;
    height: 500px;
    margin-top: -250px;
    left: 50%;
    width: 780px;
    margin-left: -350px;
    z-index: 1001;
    background-color: #fff;
    border-radius: 10px;
    transition: height 500ms, margin-top 500ms;
    -webkit-transition: height 500ms, margin-top 500ms;
    -moz-transition: height 500ms, margin-top 500ms;
  }
  .hidden {
    display: none;
  }

  /*
   * CSS for the GCB Rich Text Editor.
   */

  div.rte-control.inputEx-Button {
    position: absolute;
    right: 10px;
    width: 55px;
    text-align: center;
    padding: 3px 0;
    background-color: #f2f2f2;
    border: solid #808080 1px;
    color: #000;
    font-weight: bold;
    font-size: 10px;
    text-decoration: none;
    cursor: pointer;
    z-index: 10;
  }
  div.inputEx-Field > div.yui-editor-container {
    width: 510px;
  }
  div.rte-control + div.inputEx-Field {
    /* Style the container for the textarea/RTE */
    margin-top: 25px;
  }
  .yui-toolbar-insertcustomtag > .yui-toolbar-icon {
    background: url() !important;
    left: 5px;
  }
  div.yui-toolbar-titlebar {
    /* Hide the top titlebar on the RTE. */
    display: none;
  }

  /*
   * CSS for multiple choice question creation.
   */

  form.mc-container > fieldset {
    padding: 15px 0;
  }
  div.mc-container a:hover {
    text-decoration: none;
  }
  div.mc-container div.yui-editor-container {
    width: 550px;
  }
  div.mc-container textarea {
    /* The question statement. */
    height: 45px;
    width: 550px;
    margin: 0;
    padding: 0;
  }
  div.mc-container > fieldset > div.inputEx-fieldWrapper > div.inputEx-label {
    width: 80px;
  }
  div.mc-question,
  div.mc-description,
  div.mc-selection,
  div.set-scores-toggle {
    margin-left: 87px;
  }
  form.mc-container > fieldset > legend + div + div > div.rte-control {
    /* The control for the question statement. */
    left: 640px;
  }
  div.mc-description input {
    width: 546px;  /* allow for 2px padding */
    margin: 0;
  }
  div.set-scores-toggle {
    margin-top: 10px;
  }
  div.mc-choice-container > div.inputEx-ListField-childContainer > div {
    width: 650px;
    position: relative;
  }
  div.mc-choice {
    float: none;
    margin: 0;
  }
  div.mc-choice > fieldset {
    width: 627px; /* hack to make the width of the first element match the rest */
    border-top: none !important;
  }
  div.mc-choice > fieldset > legend {
    display: none;
  }
  div.mc-choice > fieldset > div.inputEx-fieldWrapper > div.inputEx-label {
    display: none;
  }
  div.mc-choice > fieldset > legend + div {
    /* The score input. */
    position: absolute;
    top: 22px;
    left: 20px;
  }
  div.mc-choice > fieldset > legend + div + div,
  div.mc-choice > fieldset > legend + div + div + div {
    /* The choice text and the feedback text. */
    margin-left: 50px;
  }
  div.mc-choice div.rte-control {
    left: 554px;
  }
  div.mc-choice > div.toggle-feedback {
    /* The show-feedback button. */
    position: absolute;
    top: 34px;
    left: 620px;
    width: 150px;
  }
  div.mc-choice > div.toggle-feedback > button,
  div.mc-choice + a {
    /* The show-feedback and the delete-choice button */
    color: #000;
    background-color: #f2f2f2;
    border: solid #808080 1px;
    padding: 3px;
    font-weight: bold;
    font-size: 10px;
  }
  div.mc-choice + a {
    /* The delete-choice button */
    position: absolute;
    bottom: -10px;
    left: 58px;
  }
  div.mc-choice-score input {
    width: 25px;
  }
  div.mc-choice-container > div.inputEx-ListField-childContainer {
    margin-bottom: 40px;
  }

  /*
   * CSS for short answer question creation.
   */
  div.sa-container > fieldset > div.inputEx-fieldWrapper > div.inputEx-label {
    width: 80px;
  }
  div.sa-container a:hover {
    text-decoration: none;
  }
  div.sa-container textarea {
    height: 75px;
    width: 510px;
    margin: 0;
    padding: 0;
  }
  div.sa-container div.yui-editor-container {
    width: 510px;
  }
  div.sa-question,
  div.sa-hint,
  div.sa-feedback,
  div.sa-grader-text,
  div.sa-grader-feedback {
    margin-top: 30px;
  }
  div.sa-question,
  div.sa-hint,
  div.sa-feedback,
  div.sa-description,
  div.sa-rows,
  div.sa-columns {
    margin-left: 87px;
  }
  div.sa-description input,
  div.sa-grader-text input {
    width: 506px;  /* allow for 2px padding */
    margin: 0;
  }
  div.sa-grader-text, div.sa-grader-feedback {
    margin-left: 67px;
  }
  div.sa-grader-question {
    width: 660px;
  }
  div.sa-grader {
    width: 650px;
  }
  div.sa-grader > fieldset > div.inputEx-fieldWrapper > div.inputEx-label {
    width:60px;
  }
  div.sa-grader div.rte-control {
    left: 580px;
  }
  div.sa-grader + a { /* The delete choice button */
    float: right;
  }
  div.sa-grader-score input {
    width: 50px;
  }

  /*
   * CSS for question group creation.
   */

  div.question-group-question select {
    width: 250px;
  }
  div.question-group-item {
    width: 650px;
  }
  div.question-group-item div.inputEx-fieldWrapper {
    display: inline-block;
    margin-right: 20px;
  }
  div.question-group-item div.inputEx-label {
    width: 60px;
  }
  div.question-group-weight,
  div.question-group-question {
    float: left;
  }
  div.question-group-weight input {
    width: 50px;
  }
  div.question-group-items a:hover {
    text-decoration: none;
  }
  div.question-group-items div.inputEx-ListField-childContainer > div {
    position: relative;
    width: 650px;
  }
  div.question-group-items div.inputEx-ListField-ArrowUp,
  div.question-group-items div.inputEx-ListField-ArrowDown,
  div.question-group-items div.inputEx-ListField-ArrowDown + a {
    position: absolute;
    top: 25px;
  }
  div.question-group-items div.inputEx-ListField-ArrowUp {
    left: 500px;
  }
  div.question-group-items div.inputEx-ListField-ArrowDown {
    left: 520px;
  }
  div.question-group-items div.inputEx-ListField-ArrowDown + a {
    left: 540px;
  }

  /*
   * CSS for assignment creation.
   */
  div.assessment-editor-button-holder {
    text-align: right;
    margin: 0 0 5px 0;
  }
  div.assessment-editor-check-answers > input[type=checkbox] {
    width: auto;
  }

  {% for file in extra_css_files %}
    {% include file %}
  {% endfor %}
</style>

<div id='oeditor-container'>
  <div class='gcb-butterbar-container'>
    <div class='gcb-butterbar' id='gcb-butterbar-top' style='top:-45px'>
      <p id='gcb-butterbar-message'></p>
      <a id='gcb-butterbar-close'>X</a>
    </div>
  </div>
  <div style='width: 100%;' align='center' class='yui3-skin-sam yui-skin-sam'>
    <div class='form' id='formContainer'></div>
  </div>
</div>
<div id='modal-editor' class='hidden'>
  <div class='background'></div>
</div>

<script type='text/javascript'>
  (function() {
    //keep all our global objects here
    var cb_global = {};

    // various URL's needed by the form
    cb_global.get_url = '{{ get_url }}';
    cb_global.save_url = '{{ save_url }}';
    cb_global.save_args = JSON.parse("{{ save_args|js_string }}");
    cb_global.exit_button_caption = '{{ exit_button_caption }}';
    cb_global.exit_url = '{{ exit_url }}';
    cb_global.save_method = '{{ save_method }}';
    cb_global.auto_return = {% if auto_return %}true{% else %}false{% endif %};
    cb_global.bundle_lib_files = {% if bundle_lib_files %}true{% else %}false{% endif %};

    // If this value is '', deletions are not allowed
    cb_global.delete_url = '{{ delete_url }}';
    cb_global.delete_method = '{{ delete_method }}';

    // button captions
    cb_global.delete_button_caption = '{{ delete_button_caption }}'
    cb_global.save_button_caption = '{{ save_button_caption }}'
    cb_global.custom_rte_tag_icons = JSON.parse("{{ custom_rte_tag_icons|js_string }}");

    cb_global.required_modules = [{% for module in required_modules %}
        '{{ module }}'{% if not loop.last %},{% endif %}{% endfor %}];
    cb_global.schema = JSON.parse("{{ schema|js_string }}");
    cb_global.delete_message = '{{ delete_message }}';
    cb_global.load_schema_with_annotations = function(schema) {
      {% for annotation in schema_annotations %}
        schema.root{% for element in annotation[0] %}['{{element}}']{% endfor %}
          = JSON.parse("{{ annotation[1]|js_string }}")
      {% endfor %}
    }
    cb_global.onFormLoad = function(Y) {
      {% for file in extra_js_files %}
        {% include file %}
      {% endfor %}
    };

    {% include 'oeditor.js' %}
    {% include 'rte.js' %}
    {% include 'popup.js' %}

    onPageLoad(cb_global);
  })();
</script>

